<template>
  <div class="basic-vueLog-loggerVue">
      <div class="author-demo">
          <div>作者：黄彪</div>
          <div>日期：2017/11/13</div>
      </div>
      <div style="font-size: 14px;">
          文章参考 <a href="https://github.com/justinkames/vuejs-logger">https://github.com/justinkames/vuejs-logger</a>
      </div>

      <div>
          案例如下图：<br/>
          <img src="../../../assets/img/vueLogger.png"/>
          <pre>
            <code class="javascript" v-text="jsCode">
            </code>
          </pre>
      </div>

      <div class="one-section">
          <h2>运行级别说明：</h2>
          <div style="padding-left: 15px;">
              <div class="define-item">
                  <div class="define-item-title">DEBUG</div>
                  <div class="define-item-contennt">
                      DEUG的主要使用目的是终端查看和在线调试。<br/>
                      该级别日志，默认情况下会打印到终端输出，但是不会归档到日志文件。因此，一般用于开发者在程序当前启动窗口上，查看日志流水信息。<br/>
                      在程序启动命令行中加入 “-nostdout” ,将关闭所有前端打印输出（主要针对DEBUG级别日志）。<br/>
                  </div>
              </div>

              <div class="define-item">
                  <div class="define-item-title">INFO</div>
                  <div class="define-item-contennt">
                      INFO的主要使用目的报告程序进度和状态信息。一般这种信息都是一过性的，不会大量反复输出。例如：连接商用库成功后，可以打印一条连库成功的信息，便于跟踪程序进展信息。<br/>
                      该级别日志，默认情况下会同时打印到终端和归档到日志文件（下同）。<br/>
                  </div>
              </div>


              <div class="define-item">
                  <div class="define-item-title">WARNING</div>
                  <div class="define-item-contennt">
                      警告信息，表明程序处理中遇到非法数据或者某种可能的错误，该错误是一过性的、可恢复的，不会影响程序继续运行，程序仍处在正常状态。
                  </div>
              </div>

              <div class="define-item">
                  <div class="define-item-title">ERROR</div>
                  <div class="define-item-contennt">
                      该错误发生后程序仍然可以运行，但是极有可能运行在某种非正常的状态下，导致无法完成全部既定的功能。
                  </div>
              </div>

              <div class="define-item">
                  <div class="define-item-title">FATAL</div>
                  <div class="define-item-contennt">
                      致命的错误，表明程序遇到了致命的错误，必须马上终止运行。
                  </div>
              </div>
          </div>
      </div>

      <div class="one-section">
          <h2>编写日志原则：</h2>
          <div style="padding-left: 15px;">
              <div class="define-item">
                  <div class="define-item-title">日志信息应该包含哪些信息</div>
                  <div class="define-item-contennt">

                      对于错误、异常情况，应尽量记录尽可能多的“上下文环境”信息.<br/>
                      如果是函数调用失败，日志中必须包含返回值信息、以及函数调用的相关参数信息。<br/>
                      任何程序在返回错误码前，一定要通过日志记录具体的错误原因，并给出尽量多的场景信息。<br/>
                  </div>
              </div>

              <div class="define-item">
                  <div class="define-item-title">哪些信息需要记日志</div>
                  <div class="define-item-contennt">
                      1）异常、错误信息<br/>
                      2）调试、追踪信息，具体包括：<br/>
                      函数入参：与其他模块交互的程序（接口函数），最好采用log_debug记录“输入参数”信息，便于问题分析。<br/>
                      执行步骤：对于关键功能函数，应该划分执行步骤，在每一步成功执行后，采用log_trace/log_debug记录，便于跟踪和掌控程序当前执行情况。<br/>
                      数据流：例如scada从fes接收到的采集数据相关信息。<br/>
                  </div>
              </div>

              <div class="define-item">
                  <div class="define-item-title">你应该写有意义的log</div>
                  <div class="define-item-contennt">
                  </div>
              </div>
          </div>
      </div>

  </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default{
        mounted: function () {
            this.$log.debug('this.$log.debug');
            this.$log.info('this.$log.info');
            this.$log.warn('this.$log.warn');
            this.$log.error('this.$log.error');
            this.$log.fatal('this.$log.fatal');

            window.setTimeout(function () {
                $('.basic-vueLog-loggerVue pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 200);
        },
        data: function(){
            return {
                jsCode:'' +
                'export default{\n' +
                '\tmounted: function () {\n' +
                '\t\tthis.$log.debug(\'this.$log.debug\');\n' +
                '\t\tthis.$log.info(\'this.$log.info\');\n' +
                '\t\tthis.$log.warn(\'this.$log.warn\');\n' +
                '\t\tthis.$log.error(\'this.$log.error\');\n' +
                '\t\tthis.$log.fatal(\'this.$log.fatal\');\n' +
                '\t},\n' +
                '}'
            }
        }
    }

</script>

<style lang="scss">
    .basic-vueLog-loggerVue {
        /* 一个章节 */
        .one-section{
            h2{
                line-height: 40px;
            }
           /*一个定义项说明*/
            .define-item {
                margin-top: 15px;
                line-height: 20px;
                .define-item-title {
                    font-weight: bold;
                }
                .define-item-contennt {
                }
            }
        }

    }
</style>

